<template>
  <view class="news-container">
    <view class="header">
      <text class="title">最新动态</text>
    </view>
    
    <!-- 资讯列表 -->
    <view class="news-list">
      <view class="row g-2">
        <view 
          class="col-md-6 col-lg-4" 
          v-for="(news, index) in newsData" 
          :key="index"
        >
          <uni-card
            :title="news.title"
            :extra="news.tag"
            :thumbnail="stores.avatarOptions[index]"
            class="animate__animated animate__fadeIn"
            :style="{ 'animation-delay': `${index * 0.2}s` }"
          >
            <text
              class="card-text"
              :class="{ 'text-expanded': expandedItems[index] }"
            >
              {{ news.content }}
            </text>
            <template v-slot:actions>
              <view class="card-actions" @tap="toggleText(index)">
                <uni-icons type="right" size="16"></uni-icons>
                <text class="action-text">
                  {{ expandedItems[index] ? "收起" : "阅读更多" }}
                </text>
              </view>
            </template>
          </uni-card>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter.js'
const url = $url
const stores = useCounterStore()
// 展开状态管理
const expandedItems = ref([]);

// 资讯数据
const newsData = ref([
{
title: '凝聚态物理前沿研讨会成功举办',
tag: '学术会议',
image: '/static/images/physics0.jpg',
content: '近日，由大学物理学院主办的凝聚态物理前沿研讨会在学术交流中心落下帷幕。来自国内外30余名专家学者围绕拓扑绝缘体、量子自旋液体等尖端领域展开深度研讨，会议发表了8项最新研究成果...'
},
{
title: '量子计算实验技能培训计划启动',
tag: '教育培训',
image: '/static/images/physics1.jpg',
content: '为培养新一代量子技术人才，国家量子实验室联合多所高校启动专项培训计划。首期课程聚焦超导量子比特操控、量子纠错算法等核心技术，学员将通过仿真实验平台完成120小时实操训练...'
},
{
title: '高能物理数据云平台建设项目进展',
tag: '技术创新',
image: '/static/images/physics2.jpg',
content: '依托最新分布式存储技术，欧洲核子研究中心(CERN)与华为云共建的高能物理数据云平台已完成首期部署。该平台可实时处理LHC对撞机产生的PB级粒子数据，并为全球200余个科研团队提供远程访问支持...'
}
]);

// 切换文本展开/收起
const toggleText = (index) => {
  expandedItems.value[index] = !expandedItems.value[index];
};
</script>

<style lang="scss" scoped>
.news-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;
}

.header {
  padding: 30rpx;
  text-align: center;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background: var(--td-brand-color);
      border-radius: 2rpx;
    }
  }
}

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  
  &.text-expanded {
    -webkit-line-clamp: unset;
  }
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 0;
  color: var(--td-brand-color);
  font-size: 24rpx;
}

:deep(.uni-card) {
  margin: 0;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .uni-card__header {
    border-bottom: 2rpx solid #f5f5f5;
  }
  
  .uni-card__header-extra-text {
    background: #f8f8f8;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-size: 22rpx;
    color: #666;
  }
}
</style> 